<template>
	<view class="content">
		<uni-fab :pattern="pattern" :content="content" horizontal="right" vertical="bottom" direction="horizontal"
			:popMenu="true" @trigger="trigger" @fabClick="fabClick" />
		<view class="content-banner">

			<swiper class="swiper" style="border-radius: 5px;overflow: hidden;" circular :indicator-dots="indicatorDots"
				:autoplay="autoplay" :interval="interval" :duration="duration">
				<swiper-item v-for="item in banner" @click="$Router.push({ path: '/pages/activity/academy/detail',query: { id: item.id } })">
					<image style="width: 100%;" v-for="e in item.images_array" :src="e" mode=""></image>
				</swiper-item>
			</swiper>
		</view>
		<view class="content-tabs">
			<view class="content-tabs-box">
				<view class="nav">
					<!-- 选项卡水平方向滑动，scroll-with-animation是滑动到下一个选项时，有一个延时效果 -->
					<scroll-view class="tab-scroll" scroll-x="true" scroll-with-animation :scroll-left="scrollLeft">
						<view class="tab-scroll_box">
							<!-- 选项卡类别列表 -->
							<view class="tab-scroll_item" v-for=" (item,index) in categorys" :key="index"
								:class="{'active':isActive==index}" @click="chenked(index,item.id)">
								{{item.name}}
							</view>
						</view>
					</scroll-view>
				</view>
				<!-- 选项卡内容轮播滑动显示，current为当前第几个swiper子项 -->
				<swiper @change="change" :current="isActive" class="swiper-content" :style="fullHeight">
					<swiper-item class="swiperitem-content" v-for=" (e,index) in categorys">
						<scroll-view scroll-y style="height: 100%;">
							<view class="nav_item" v-for="(item,i) in listData" :key="i"
								@click="$Router.push({ path: '/pages/activity/academy/detail',query: { id: item.id } })">
								<view class="nav_item_left">
									<p class="nav_item_left_tit">{{item.title}}</p>
									<p class="nav_item_left_time">{{item.create_at}}</p>
								</view>
								<image v-for="e in item.image" :src="e" mode=""></image>
							</view>
						</scroll-view>
					</swiper-item>
				</swiper>
			</view>


		</view>

	</view>
</template>

<script>
	import shBanner from '@/pages/index/components/sh-banner.vue';
	import {
		BASE_URL,
		API_URL
	} from '@/env.js';
	export default {
		watch: {
			// swiper与上面选项卡联动
			currentindex(newval) {
				this.isActive = newval;
				this.scrollLeft = 0;
				// 滑动swiper后，每个选项距离其父元素最左侧的距离
				for (let i = 0; i < newval - 1; i++) {
					this.scrollLeft += this.categorys[i].width
				}
			}
		},
		components: {
			shBanner,

		},
		data() {
			return {
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,

				categorys: [],
				isActive: 0,
				index: 0,
				currentindex: 0,
				contentScrollw: 0, // 导航区宽度
				scrollLeft: 0, // 横向滚动条位置
				fullHeight: "",
				lists: {
					height: 350,
					name: "",
					radius: 10,
					style: 1,
					x: 0,
					y: 0,
					list: [{
							bgcolor: "#a71f23",
							image: "http://file.shopro.top/uploads/20230107/6b21f96cca4abbdc39a414c201f47ce0.jpg",
							name: "",
							path: "",
							path_name: "",
							path_type: 1,
						},
						{
							bgcolor: "#a71f23",
							image: "http://file.shopro.top/uploads/20230107/6b21f96cca4abbdc39a414c201f47ce0.jpg",
							name: "",
							path: "",
							path_name: "",
							path_type: 1,
						}
					]
				},
				listData: [],
				banner: [],
				loadingType: '',
				pattern: {
					color: 'gray',
					backgroundColor: '#FFFFFF',
					selectedColor: 'gray',
					buttonColor: '#3c3e49'
				},
				content: [{
						iconPath: '/static/images/tabbar/tabbar_home1.png',
						selectedIconPath: '/static/images/tabbar/tabbar_home1.png',
						gopath: '/pages/index/index',
						text: '首页',
						active: false
					},
					{
						iconPath: '/static/images/tabbar/tabbar_cart1.png',
						selectedIconPath: '/static/images/tabbar/tabbar_cart1.png',
						gopath: '/pages/index/cart',
						text: '购物车',
						active: true
					},
					{
						iconPath: '/static/images/tabbar/tabbar_personal1.png',
						selectedIconPath: '/static/images/tabbar/tabbar_personal1.png',
						gopath: '/pages/index/user',
						text: '我的',
						active: false
					}
				]
			}


		},
		onLoad() {
			this.getListType()

			this.getBanner()
		},

		mounted() {
			var that = this;
			//获取手机屏幕的高度，让其等于swiper的高度，从而使屏幕充满
			uni.getSystemInfo({
				success: function(res) {
					that.fullHeight = "height:" + res.windowHeight + "px";
				}
			});
			// 获取标题区域宽度，和每个子元素节点的宽度
			that.getScrollW()
		},

		methods: {
			changeIndicatorDots(e) {
				this.indicatorDots = !this.indicatorDots
			},
			changeAutoplay(e) {
				this.autoplay = !this.autoplay
			},
			intervalChange(e) {
				this.interval = e.target.value
			},
			durationChange(e) {
				this.duration = e.target.value
			},
			// 获取标题区域宽度，和每个子元素节点的宽度以及元素距离左边栏的距离
			getScrollW() {
				let that = this
				const query = uni.createSelectorQuery().in(this);
				query.select('.tab-scroll').boundingClientRect(data => {
					// 拿到 scroll-view 组件宽度
					this.contentScrollW = data.width
				}).exec();
				query.selectAll('.tab-scroll_item').boundingClientRect(data => {
					let dataLen = data.length;
					for (let i = 0; i < dataLen; i++) {
						//  scroll-view 子元素组件距离左边栏的距离
						this.categorys[i].left = data[i].left;
						//  scroll-view 子元素组件宽度
						this.categorys[i].width = data[i].width
					}
				}).exec()
			},
			// 当前点击子元素靠左留一个选项展示，子元素宽度不相同也可实现
			chenked(index, id) {
				this.isActive = index;
				this.getListData(id)
				this.scrollLeft = 0;
				for (let i = 0; i < index - 1; i++) {
					this.scrollLeft += this.categorys[i].width
				};
			},
			// swiper滑动时，获取其索引，也就是第几个
			change(e) {
				const {
					current
				} = e.detail;
				this.currentindex = current;
			},
			// 分类
			getListType() {
				let that = this;
				// that.loadStatus = 'loading';
				uni.request({
					url: `${BASE_URL}/zz_article/article_type`, //仅为示例，并非真实接口地址。
					success: (res) => {
						if (res.data.code == 1) {
							that.categorys = res.data.data
							this.getListData(this.categorys[0].id)
						}
						console.log(res);
					}
				});
				// that.$http('academy.type', {}).then(res => {
				// 	console.log(res)
				// 	if (res.code === 1) {

				// 	}
				// });
			},
			getListData(id) {
				let that = this;
				uni.request({
					url: `${BASE_URL}/zz_article/article_list`,
					data: {
						page: 1,
						type_id: id,
						banner_is: 0
					},
					success: (res) => {
						console.log(res);
						if (res.data.code == 1) {
							that.listData = res.data.data.data
						}
					}
				});
			},
			getBanner() {
				let that = this;
				uni.request({
					url: `${BASE_URL}/zz_article/article_list`,
					data: {
						banner_is: 'y'
					},
					success: (res) => {
						if (res.data.code == 1) {
							that.banner = res.data.data
						}
					}
				});
			},
			trigger(e) {
				console.log(e)
				uni.switchTab({
					url: e.item.gopath
				})
			},
			// 点击了悬浮按钮
			fabClick() {}
		}
	}
</script>

<style>
	.content {
		height: 100vh;
		padding: 30rpx;
	}

	.indicator {
		justify-content: center;
	}

	.indicator__dot {
		height: 6px;
		width: 6px;
		border-radius: 100px;
		background-color: rgba(255, 255, 255, 0.35);
		margin: 0 5px;
		transition: background-color 0.3s;
	}

	.indicator__dot--active {
		background-color: #ffffff;
	}

	.indicator-num {
		padding: 2px 0;
		background-color: rgba(0, 0, 0, 0.35);
		border-radius: 100px;
		width: 35px;
		@include flex;
		justify-content: center;
	}

	.indicator-num__text {
		color: #FFFFFF;
		font-size: 12px;
	}

	.content-tabs {
		display: flex;
	}

	.content-tabs-box {
		display: flex;
		flex-direction: column;
		width: 100%;
		flex: 1;
	}

	.nav {
		border-top: 1rpx solid #f2f2f2;
		z-index: 99;
		width: 100%;
		align-items: center;
		height: 100rpx;
	}

	.tab-scroll {
		flex: 1;
		overflow: hidden;
		box-sizing: border-box;
		padding-left: 30rpx;
		padding-right: 30rpx;
	}

	.tab-scroll_box {
		display: flex;
		align-items: center;
		flex-wrap: nowrap;
		box-sizing: border-box;
	}

	.tab-scroll_item {
		line-height: 60rpx;
		margin-right: 35rpx;
		flex-shrink: 0;
		padding-bottom: 10px;
		display: flex;
		justify-content: center;
		font-size: 16px;
		padding-top: 10px;
	}


	.nav_item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 40rpx;
		border-bottom: 1px solid #eee;
	}

	.nav_item_left {
		height: 150rpx;
		display: grid;
		align-items: inherit;
	}

	.nav_item_left .nav_item_left_time {
		color: #ccc;
		font-size: 24rpx;
	}

	.nav_item image {
		width: 250rpx;
		height: 150rpx;
	}

	.active {
		position: relative;
		color: #000;
		font-weight: 600;
	}

	.active::after {
		content: "";
		position: absolute;
		width: 50%;
		height: 7rpx;
		background-color: #1eff25;
		left: 0px;
		right: 0px;
		bottom: 3px;
		margin: auto;
		border-radius: 10px;
	}
	/* 隐藏滚动条，但依旧具备可以滚动的功能 */
	/deep/.uni-scroll-view::-webkit-scrollbar {
		display: none
	}
</style>
